<template>
<div class="box">
  <div class="login">
    <div class="mylogin" align="center">
      <h4 style="margin: 10px">商品入库</h4>
      <el-form ref="form" :model="addGoods" label-width="80px" >
        <el-form-item label="商品名称">
          <el-input v-model="addGoods.goodsName"></el-input>
        </el-form-item>

        <el-form-item label="商品数量">
          <el-input v-model="addGoods.goodsNum"></el-input>
        </el-form-item>

        <el-form-item label="商品类型">
          <!-- <el-input v-model="addGoods.goodsType"></el-input> -->
          <el-select  v-model="addGoods.goodsType" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.typeName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品进价">
          <el-input  v-model="addGoods.inPrice"></el-input>
        </el-form-item>

        <el-form-item label="商品售价">
          <el-input v-model="addGoods.outPrice"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addG">提交</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>
</template>

<script>
import axios from "axios";
export default {
  name: "Add",
  data(){
    return{
      addGoods:{
        goodsName:'',
        goodsNum:'',
        goodsType:'',
        inPrice:'',
        outPrice:''
      },
      options: [],
      value:''
    }
  },
  mounted(){
    axios.get("http://localhost:8088/goodsTypes").then(resp=>{
        this.$set(this,'options',resp.data)
        console.log(this.options)
    })
  },
  methods:{

    addG(){
      axios({
        method: "post",
        url: "http://localhost:8088/addGoods",
        params:this.addGoods
      }).then(resp=>{
        if(resp.data==true){
          this.$message({
            message: '成功，信息已录入',
            type: 'success'
          });
          this.$router.push("/stock");
        }
      })
      // this.$router.push("/stock");
    }
  }




}
</script>

<style scoped>



.login {
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-position: left top;
  /* background-color: #cccccc; */
  background-color: #eee;
  color: rgba(0, 0, 0, 0.49);
  font-family: "Source Sans Pro";
  position: relative;
}

.mylogin {
  width: 480px;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(114, 110, 110, 0.7);
  opacity: 1;
  /* background: linear-gradient(
      230deg,
      rgba(255, 255, 255, 0) 0%,
      rgb(255, 255, 255) 100%
  ); */
  background: linear-gradient(to top, rgb(0, 255, 136), 5%, pink);
}

.inps input {
  border: none;
  color: #fff;
  background-color: transparent;
  font-size: 12px;
}

.submitBtn {
  background-color: transparent;
  color: #f2f3f4;
  width: 200px;
}


</style>